<template>
  <el-button type="primary" @click="open">{{ $t('元素设置') }}</el-button>

  <el-dialog :title="$t('组设置')" width="900px" v-model="visibleByGroup" top="5vh">
    <el-button-group class="operator">
      <el-button type="primary" @click="save(0)">{{ $t('btn_save') }}</el-button>
    </el-button-group>

    <el-table :data="store.state.currentGroup" class="setting_dialog_group_list" height="65vh">
      <el-table-column prop="id" label="id" :width="60" />
      <el-table-column prop="name" label="name" sortable>
        <template #default="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="isRequired" label="isRequired" :width="110" align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.isRequired" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="childCount" label="childCount" />
      <el-table-column prop="zIndex" label="zIndex" sortable>
        <template #default="scope">
          <el-input v-model="scope.row.zIndex"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="rid" label="rid">
        <template #default="scope">
          <el-input type="number" v-model="scope.row.rid"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="isExportJson" label="isExportJson" :width="110" align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.isExportJson" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="advId" label="互斥ID">
        <template #default="scope">
          <el-input type="number" v-model="scope.row.advId"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="operator" align="right">
        <template #default="scope">
          <el-button type="text" @click="() => openItems(scope.row.id)">{{ $t('编辑子元素') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog :title="$t('子元素设置')" width="700px" v-model="visibleByItems" top="10vh">
    <div class="operator">
      <el-button type="primary" @click="save(1)">{{ $t('btn_save') }}</el-button>
    </div>

    <el-table :data="itemsData" class="setting_dialog_group_list" height="55vh">
      <el-table-column prop="id" label="id" :width="60" />
      <el-table-column prop="name" label="name">
        <template #default="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="url" show-overflow-tooltip />
      <el-table-column prop="max" label="max">
        <template #default="scope">
          <el-input type="number" v-model="scope.row.max"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="currentCount" label="currentCount">
        <template #default="scope">
          <el-input type="number" v-model="scope.row.currentCount"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import sortable from 'sortablejs'
import { useConfigStore } from '@/store/config.store';
const store = useConfigStore()

const visibleByGroup = ref(false)
const visibleByItems = ref(false)
const itemsData = ref<Config.Item[]>([])

const save = (type: 0 | 1) => {
  store.dispatch('save')
    .then(() => {
      ElMessage.success('保存成功！')
      type === 0 ? visibleByGroup.value = false : visibleByItems.value = false
    })
}

const openItems = (gid: number) => {
  itemsData.value = store.state.currentItems.filter(k => k.gid === gid)

  visibleByItems.value = true
}

const init = () => {
  nextTick(() => {
    const listRef = document.querySelector('.setting_dialog_group_list tbody') as HTMLElement
    sortable.create(listRef, {
      animation: 150,
      onEnd(evt: any) {
        const _old = evt.oldIndex
        const _new = evt.newIndex
        const group = store.state.currentGroup

        if (group) {
          const arr = [...group]
          const cur = arr.splice(_old, 1)[0]
          arr.splice(_new, 0, cur)
          arr.map((k, i) => k.zIndex = i)
        }
      }
    })
  })
}

const open = () => {
  // store.dispatch('pull')
  visibleByGroup.value = true
}

defineExpose({open})
</script>

<style lang="less" scoped>
.operator{padding-bottom:20px; float:right;}
</style>
